<template>
  <div class="address-selector-demo">
    <h2>AddressSelector 组件演示</h2>
    
    <div class="demo-section">
      <h3>1. 级联选择器模式（默认）</h3>
      <div class="demo-item">
        <label>单选模式：</label>
        <AddressSelector 
          v-model="cascaderSingle"
          mode="cascader"
          :level="3"
          placeholder="请选择省市区"
          @change="handleCascaderSingleChange"
        />
        <p class="result">选中值: {{ JSON.stringify(cascaderSingle) }}</p>
        <p class="tip">✅ 已修复：现在只需点击一次即可选中数据</p>
      </div>
      
      <div class="demo-item">
        <label>多选模式：</label>
        <AddressSelector 
          v-model="cascaderMultiple"
          mode="cascader"
          :level="3"
          :multiple="true"
          :collapse-tags="true"
          placeholder="请选择多个地区"
          @change="handleCascaderMultipleChange"
        />
        <p class="result">选中值: {{ JSON.stringify(cascaderMultiple) }}</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>2. 下拉选择器模式</h3>
      <div class="demo-item">
        <label>三级联动：</label>
        <AddressSelector 
          v-model="selectValue"
          mode="select"
          :level="3"
          province-placeholder="选择省份"
          city-placeholder="选择城市"
          district-placeholder="选择区县"
          :show-code="true"
          @change="handleSelectChange"
        />
        <p class="result">选中值: {{ JSON.stringify(selectValue) }}</p>
      </div>
      
      <div class="demo-item">
        <label>只选择到市级：</label>
        <AddressSelector 
          v-model="selectCity"
          mode="select"
          :level="2"
          province-placeholder="选择省份"
          city-placeholder="选择城市"
          @change="handleSelectCityChange"
        />
        <p class="result">选中值: {{ JSON.stringify(selectCity) }}</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>3. 弹窗选择模式</h3>
      <div class="demo-item">
        <label>单选模式：</label>
        <AddressSelector 
          v-model="dialogSingle"
          mode="dialog"
          :level="3"
          placeholder="点击选择地区"
          @change="handleDialogSingleChange"
        />
        <p class="result">选中值: {{ JSON.stringify(dialogSingle) }}</p>
      </div>
      
      <div class="demo-item">
        <label>多选模式：</label>
        <AddressSelector 
          v-model="dialogMultiple"
          mode="dialog"
          :level="3"
          :multiple="true"
          :collapse-tags="true"
          placeholder="点击选择多个地区"
          @change="handleDialogMultipleChange"
        />
        <p class="result">选中值: {{ JSON.stringify(dialogMultiple) }}</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>4. 返回对象格式</h3>
      <div class="demo-item">
        <label>返回完整对象：</label>
        <AddressSelector 
          v-model="objectValue"
          mode="cascader"
          :level="3"
          return-type="objects"
          placeholder="选择地区（返回对象）"
          @change="handleObjectChange"
        />
        <p class="result">选中对象: {{ JSON.stringify(objectValue, null, 2) }}</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>5. 表单集成示例</h3>
      <el-form :model="form" :rules="rules" ref="demoForm" label-width="120px">
        <el-form-item label="居住地址" prop="address">
          <AddressSelector 
            v-model="form.address"
            mode="select"
            :level="3"
            placeholder="请选择居住地址"
          />
        </el-form-item>
        
        <el-form-item label="工作地址" prop="workAddress">
          <AddressSelector 
            v-model="form.workAddress"
            mode="cascader"
            :level="2"
            placeholder="请选择工作地址"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交表单</el-button>
          <el-button @click="resetForm">重置表单</el-button>
          <el-button @click="setDefaultValues">设置默认值</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <div class="demo-section">
      <h3>6. 不同尺寸和样式</h3>
      <div class="demo-item">
        <label>大尺寸：</label>
        <AddressSelector 
          v-model="sizeDemo1"
          mode="cascader"
          size="medium"
          placeholder="大尺寸选择器"
        />
      </div>
      
      <div class="demo-item">
        <label>小尺寸：</label>
        <AddressSelector 
          v-model="sizeDemo2"
          mode="cascader"
          size="small"
          placeholder="小尺寸选择器"
        />
      </div>
      
      <div class="demo-item">
        <label>迷你尺寸：</label>
        <AddressSelector 
          v-model="sizeDemo3"
          mode="cascader"
          size="mini"
          placeholder="迷你尺寸选择器"
        />
      </div>
      
      <div class="demo-item">
        <label>禁用状态：</label>
        <AddressSelector 
          v-model="disabledDemo"
          mode="cascader"
          :disabled="true"
          placeholder="禁用状态"
        />
      </div>
    </div>
  </div>
</template>

<script>
import AddressSelector from './AddressSelector.vue'

export default {
  name: 'AddressSelectorDemo',
  components: {
    AddressSelector
  },
  data() {
    return {
      // 级联选择器
      cascaderSingle: [],
      cascaderMultiple: [],
      
      // 下拉选择器
      selectValue: [],
      selectCity: [],
      
      // 弹窗选择器
      dialogSingle: [],
      dialogMultiple: [],
      
      // 对象格式
      objectValue: [],
      
      // 表单数据
      form: {
        address: [],
        workAddress: []
      },
      rules: {
        address: [
          { required: true, message: '请选择居住地址', trigger: 'change' }
        ],
        workAddress: [
          { required: true, message: '请选择工作地址', trigger: 'change' }
        ]
      },
      
      // 尺寸演示
      sizeDemo1: [],
      sizeDemo2: [],
      sizeDemo3: [],
      disabledDemo: ['110000', '110100', '110101'] // 北京市东城区
    }
  },
  methods: {
    // 级联选择器事件
    handleCascaderSingleChange(value, objects) {
      console.log('级联单选变化:', value, objects)
    },
    
    handleCascaderMultipleChange(value, objects) {
      console.log('级联多选变化:', value, objects)
    },
    
    // 下拉选择器事件
    handleSelectChange(value, objects) {
      console.log('下拉选择变化:', value, objects)
    },
    
    handleSelectCityChange(value, objects) {
      console.log('下拉城市选择变化:', value, objects)
    },
    
    // 弹窗选择器事件
    handleDialogSingleChange(value, objects) {
      console.log('弹窗单选变化:', value, objects)
    },
    
    handleDialogMultipleChange(value, objects) {
      console.log('弹窗多选变化:', value, objects)
    },
    
    // 对象格式事件
    handleObjectChange(objects) {
      console.log('对象格式变化:', objects)
    },
    
    // 表单操作
    submitForm() {
      this.$refs.demoForm.validate((valid) => {
        if (valid) {
          this.$message.success('表单验证通过！')
          console.log('表单数据:', this.form)
        } else {
          this.$message.error('表单验证失败！')
        }
      })
    },
    
    resetForm() {
      this.$refs.demoForm.resetFields()
    },
    
    setDefaultValues() {
      this.form.address = ['110000', '110100', '110101'] // 北京市东城区
      this.form.workAddress = ['310000', '310100'] // 上海市
      this.$message.info('已设置默认值')
    }
  },
  
  mounted() {
    // 设置一些初始值用于演示
    setTimeout(() => {
      this.cascaderSingle = ['110000', '110100', '110101'] // 北京市东城区
      this.selectValue = ['310000', '310100', '310101'] // 上海市黄浦区
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
.address-selector-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  
  h2 {
    color: #303133;
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 2px solid #409eff;
    padding-bottom: 10px;
  }
  
  h3 {
    color: #606266;
    margin: 30px 0 20px 0;
    font-size: 18px;
    border-left: 4px solid #409eff;
    padding-left: 10px;
  }
  
  .demo-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
  }
  
  .demo-item {
    margin-bottom: 20px;
    
    label {
      display: inline-block;
      width: 150px;
      font-weight: 600;
      color: #606266;
      margin-bottom: 8px;
    }
    
    .result {
      margin-top: 10px;
      padding: 10px;
      background: #fff;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: #606266;
      white-space: pre-wrap;
      word-break: break-all;
    }
    
    .tip {
      margin-top: 8px;
      padding: 8px 12px;
      background: #f0f9ff;
      border: 1px solid #67c23a;
      border-radius: 4px;
      font-size: 12px;
      color: #67c23a;
      font-weight: 500;
    }
  }
  
  .el-form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
  }
}
</style>